<template>
	<!-- 校友会成员 -->
	<g-page :is-tabbar="false">
		<view class="content">
			<!-- 搜索 -->
			<view class="search">
				<!-- 搜索框参数：https://uviewui.com/components/search.html -->
				<u-search shape="round"  placeholder="输入姓名" @input="goToSearch" v-model="name"></u-search>
			</view>
			<view v-if="associationUser.length>0">
				<view class="item-box" v-for="(item,index) in associationUser" :key="index">
					<view class="item-item">
						<view class="item-left">
							<view class="item-icon">
								<image style="margin-top: 6rpx;margin-left: 4rpx; width: 70rpx;height: 70rpx;border-radius: 50%;" :src="item.avatar_url"></image>
							</view>
							<view class="item-left-t">
								<view class="item-left-t-name">
									{{item.username}}
								</view>
								<view class="item-left-t-dep">
									{{item.gender==0 ? '男' : '女'}}
								</view>
							</view>
						</view>
					</view>
					<u-line class="u-line" :hair-line="false"></u-line>
				</view>
			</view>
			<view v-else-if="type==1" style="text-align: center;">暂无校友会成员</view>
			<view v-else-if="type==2" style="text-align: center;">没有查询到该成员</view>
		</view>
	</g-page>
</template>

<script>
	import {
		getAssociationUser
	} from "@api"
	export default {
		"name" : "alumni_member",
		data() {
			return {
				associationUser: [], //校友会成员
				associationId: '', //校友会id
				user_id: '', //用户id
				page: 0, //页数
				flag: 'true', //判断是否到底
				size: 10, //每次分页查询的数据量
				name: '',
				type:1
			}
		},
		//获取上一页面传的校友会id查询所有成员
		onLoad(option) {
			this.associationId = option.id;
			this.query(this.associationId)
		},
		methods: {
			query(id) {
				var that = this;
				getAssociationUser({id:id,page:that.page,size:that.size})
				.then(res=>{
				 if (res.length == 0) {
				 	that.flag = 'false';
				 	that.page = 0;
					that.type = 1;
				 }
				 that.associationUser = res;
				})
			},
			/* </scroll-view>的触底函数*/
			scrolltolower: function() {
				console.log("我是最底部了");
				if (this.flag == 'false') {
					this.page = 0;
					uni.showToast({
						title: '到底啦~',
						icon: 'none'
					});
				}
			},
			goToSearch(){
				var that = this;
				if(that.name == ''){
					that.query(that.associationId);
				}else{
					getAssociationUser({id:that.associationId,userName:that.name,page:that.page,size:that.size})
					.then(res=>{
					 if (res.length == 0) {
					 	that.flag = 'false';
					 	that.page = 0;
						that.type = 2;
					 }
					 that.associationUser = res;
					})
				}
			},
			//判断属于教师还是学生
			toStuAndTea(typeId, userId) {
				this.user_id = userId;
				if (parseInt(typeId) == 2) {
					uni.navigateTo({
						url: 'own_inforteacher?id=' + this.user_id
					})
				} else {
					uni.navigateTo({
						url: 'own_inforstudent?id=' + this.user_id
					})
				}
			},
		}
	}
</script>
<style lang="scss">
	.content {
		padding: 10rpx 20rpx;
	}

	.search {
		margin-bottom: 20rpx;
	}

	.item {
		&-item {
			height: 120rpx;
			line-height: 120rpx;
			padding: 2rpx 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		&-left {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;

			&-t {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-top: 20rpx;

				&-name,
				&-dep {
					height: 40rpx;
					line-height: 40rpx;
				}

				&-name {
					font-size: 1.1em;
				}

				&-dep {
					font-size: 24rpx;
					color: #96969a;
				}
			}
		}

		&-box {
			&:hover {
				background: #F6F6F6 !important;
			}
		}

		&-icon {
			width: 80rpx;
			height: 80rpx;
			margin-top: 20rpx;
			border-radius: 50%;
			background-color: #ff0000;
		}

		&-right {
			height: 120rpx;
			line-height: 120rpx;
		}
	}
</style>
